<template>
    <div ref="scatterChart" class="scatter-chart"></div>
  </template>
  
  <script>
  import * as echarts from 'echarts';
  
  export default {
    mounted() {
      const scatterChart = echarts.init(this.$refs.scatterChart);
      const option = {
        title: {
          text: '用户每日步数与摄入卡路里',
          left: 'center',
        },
        tooltip: {
          trigger: 'item',
        },
        xAxis: {
          type: 'value',
          name: '步数',
        },
        yAxis: {
          type: 'value',
          name: '摄入卡路里',
        },
        series: [
          {
            symbolSize: 10,
            data: [
              [3000, 2000],
              [5000, 2500],
              [7000, 3000],
              [10000, 4000],
              [15000, 5000],
            ],
            type: 'scatter',
          },
        ],
      };
      scatterChart.setOption(option);
    },
  };
  </script>
  
  <style scoped>
  .scatter-chart {
    width: 35%;
    height: 350px;
    padding: 1.5rem;
    background-color: #ffffff;
    border-radius: 1.75rem;
    box-shadow: 0 0 30px #0a113612;
  }
  </style>